<template>
  <div style="margin-bottom: 20px">
    <el-row>
      <el-col :span="24" style="text-align: center">
        {{ title }}: {{ count }} {{ unit }}，  核算: {{ total }} {{ unit }}。
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="1" v-for="(v, i) in value">
        {{ i }} 时
        <el-slider v-model="value[i]" :show-tooltip="false" vertical show-input height="180px" style="margin-top: 10px"></el-slider>
      </el-col>
    </el-row>
  </div >
</template>
<script type="text/javascript">
  export default {
    props: ['title', 'count', 'unit'],
    data () {
      let value = [];
      for(let i=0;i<24;i++){
        value.push(i * 3);
      }
      return {
        value
      }
    },
    computed: {
      total () {
        let sum = 0;
        for(let v of this.value){
          sum += v;
        }
        return sum;
      }
    }
  }
</script>